<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">
    <title>消息中心 - 新时代文明实践智慧服务系统</title>
    <style>
        * {
            margin: 0;
            padding: 0;
            box-sizing: border-box;
            -webkit-tap-highlight-color: transparent;
        }
        
        body {
            font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", 'Helvetica Neue', 'Microsoft YaHei', Arial, sans-serif;
            background: #f5f5f5;
            overflow-x: hidden;
            padding-top: 44px;
            padding-bottom: 60px;
        }
        
        /* 顶部导航栏 */
        .navbar {
            background: linear-gradient(135deg, #ff6b00 0%, #ffa726 100%);
            color: white;
            height: 44px;
            padding: 0 15px;
            display: flex;
            justify-content: space-between;
            align-items: center;
            position: fixed;
            top: 0;
            left: 0;
            right: 0;
            z-index: 1000;
            box-shadow: 0 2px 10px rgba(102, 126, 234, 0.3);
        }
        
        .navbar-left {
            display: flex;
            align-items: center;
            gap: 10px;
            cursor: pointer;
        }
        
        .back-btn {
            font-size: 18px;
        }
        
        .navbar-title {
            font-size: 16px;
            font-weight: bold;
        }
        
        .navbar-right {
            display: flex;
            gap: 15px;
            font-size: 18px;
        }
        
        .nav-icon {
            cursor: pointer;
            transition: opacity 0.3s;
        }
        
        .nav-icon:hover {
            opacity: 0.7;
        }
        
        /* 消息分类 */
        .message-categories {
            background: white;
            margin: 15px;
            border-radius: 16px;
            padding: 20px;
            box-shadow: 0 2px 12px rgba(0, 0, 0, 0.08);
        }
        
        .category-grid {
            display: grid;
            grid-template-columns: repeat(4, 1fr);
            gap: 15px;
        }
        
        .category-item {
            text-align: center;
            padding: 15px 10px;
            border-radius: 12px;
            background: #f8f9fa;
            cursor: pointer;
            transition: all 0.3s;
            position: relative;
        }
        
        .category-item:hover {
            transform: translateY(-2px);
            box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
        }
        
        .category-icon {
            font-size: 24px;
            margin-bottom: 8px;
            display: block;
        }
        
        .category-name {
            font-size: 12px;
            color: #333;
            font-weight: bold;
        }
        
        .category-badge {
            position: absolute;
            top: 5px;
            right: 5px;
            background: #ff4d4f;
            color: white;
            border-radius: 50%;
            width: 18px;
            height: 18px;
            font-size: 10px;
            display: flex;
            align-items: center;
            justify-content: center;
            font-weight: bold;
        }
        
        /* 消息列表 */
        .message-list {
            margin: 0 15px;
        }
        
        .message-item {
            background: white;
            border-radius: 16px;
            padding: 15px;
            margin-bottom: 10px;
            box-shadow: 0 2px 12px rgba(0, 0, 0, 0.08);
            cursor: pointer;
            transition: all 0.3s;
            position: relative;
        }
        
        .message-item:hover {
            transform: translateY(-1px);
            box-shadow: 0 4px 16px rgba(0, 0, 0, 0.12);
        }
        
        .message-item.unread {
            border-left: 4px solid #ff6b00;
        }
        
        .message-item.unread::before {
            content: '';
            position: absolute;
            top: 15px;
            left: 10px;
            width: 8px;
            height: 8px;
            background: #ff4d4f;
            border-radius: 50%;
        }
        
        .message-header {
            display: flex;
            align-items: center;
            gap: 10px;
            margin-bottom: 10px;
        }
        
        .message-avatar {
            width: 40px;
            height: 40px;
            border-radius: 50%;
            background: linear-gradient(135deg, #ff6b00, #ffa726);
            display: flex;
            align-items: center;
            justify-content: center;
            color: white;
            font-size: 16px;
            flex-shrink: 0;
        }
        
        .message-info {
            flex: 1;
        }
        
        .message-sender {
            font-size: 14px;
            font-weight: bold;
            color: #333;
            margin-bottom: 2px;
        }
        
        .message-type {
            font-size: 11px;
            color: #999;
            background: #f0f2f5;
            padding: 2px 6px;
            border-radius: 8px;
            display: inline-block;
        }
        
        .message-time {
            font-size: 11px;
            color: #999;
            white-space: nowrap;
        }
        
        .message-content {
            margin-bottom: 8px;
        }
        
        .message-title {
            font-size: 13px;
            font-weight: bold;
            color: #333;
            margin-bottom: 4px;
            line-height: 1.4;
        }
        
        .message-preview {
            font-size: 12px;
            color: #666;
            line-height: 1.5;
            display: -webkit-box;
            -webkit-line-clamp: 2;
            -webkit-box-orient: vertical;
            overflow: hidden;
        }
        
        .message-actions {
            display: flex;
            justify-content: space-between;
            align-items: center;
        }
        
        .message-tags {
            display: flex;
            gap: 5px;
        }
        
        .message-tag {
            font-size: 10px;
            padding: 2px 6px;
            border-radius: 8px;
            background: #e6f7ff;
            color: #0958d9;
        }
        
        .message-tag.urgent {
            background: #fff1f0;
            color: #cf1322;
        }
        
        .message-tag.important {
            background: #fff7e6;
            color: #d46b08;
        }
        
        .message-operations {
            display: flex;
            gap: 8px;
        }
        
        .message-btn {
            font-size: 12px;
            color: #ff6b00;
            cursor: pointer;
            transition: color 0.3s;
        }
        
        .message-btn:hover {
            color: #1890ff;
        }
        
        /* 无消息状态 */
        .empty-state {
            background: white;
            border-radius: 16px;
            padding: 40px 20px;
            text-align: center;
            margin: 20px;
            box-shadow: 0 2px 12px rgba(0, 0, 0, 0.08);
        }
        
        .empty-icon {
            font-size: 48px;
            margin-bottom: 15px;
            opacity: 0.3;
        }
        
        .empty-text {
            font-size: 14px;
            color: #999;
            margin-bottom: 20px;
        }
        
        .empty-action {
            background: linear-gradient(135deg, #ff6b00, #ffa726);
            color: white;
            padding: 10px 20px;
            border-radius: 20px;
            border: none;
            font-size: 13px;
            cursor: pointer;
            transition: all 0.3s;
        }
        
        .empty-action:hover {
            transform: translateY(-1px);
            box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
        }
        
        /* 搜索栏 */
        .search-bar {
            background: white;
            margin: 15px;
            border-radius: 20px;
            padding: 10px 15px;
            display: flex;
            align-items: center;
            gap: 10px;
            box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
        }
        
        .search-input {
            flex: 1;
            border: none;
            outline: none;
            font-size: 14px;
            background: transparent;
        }
        
        .search-btn {
            color: #ff6b00;
            font-size: 16px;
            cursor: pointer;
        }
        
        /* 筛选标签 */
        .filter-bar {
            background: white;
            margin: 0 15px 15px;
            border-radius: 16px;
            padding: 15px;
            box-shadow: 0 2px 12px rgba(0, 0, 0, 0.08);
        }
        
        .filter-scroll {
            display: flex;
            gap: 8px;
            overflow-x: auto;
            padding-bottom: 5px;
        }
        
        .filter-scroll::-webkit-scrollbar {
            display: none;
        }
        
        .filter-tag {
            padding: 6px 12px;
            border-radius: 15px;
            background: #f0f2f5;
            font-size: 12px;
            color: #666;
            cursor: pointer;
            transition: all 0.3s;
            white-space: nowrap;
        }
        
        .filter-tag.active {
            background: linear-gradient(135deg, #ff6b00, #ffa726);
            color: white;
        }
        
        /* 底部导航 */
        .bottom-nav {
            position: fixed;
            bottom: 0;
            left: 0;
            right: 0;
            background: white;
            display: flex;
            box-shadow: 0 -2px 10px rgba(0, 0, 0, 0.1);
            z-index: 100;
        }
        
        .nav-item {
            flex: 1;
            text-align: center;
            padding: 8px 0;
            cursor: pointer;
            transition: all 0.3s;
        }
        
        .nav-item-icon {
            font-size: 20px;
            margin-bottom: 2px;
        }
        
        .nav-label {
            font-size: 10px;
            color: #999;
        }
        
        .nav-item.active .nav-item-icon {
            color: #ff6b00;
        }
        
        .nav-item.active .nav-label {
            color: #ff6b00;
        }
    </style>
</head>
<body>
    <!-- 顶部导航栏 -->
    <div class="navbar">
        <div class="navbar-left" onclick="goBack()">
            <span class="back-btn">←</span>
            <span class="navbar-title">消息中心</span>
        </div>
        <div class="navbar-right">
            <span class="nav-icon" onclick="markAllRead()">✓</span>
            <span class="nav-icon" onclick="showSettings()">⚙️</span>
        </div>
    </div>
    
    <!-- 搜索栏 -->
    <div class="search-bar">
        <span class="search-icon">🔍</span>
        <input type="text" class="search-input" placeholder="搜索消息内容或发送者">
        <span class="search-btn">搜索</span>
    </div>
    
    <!-- 消息分类 -->
    <div class="message-categories">
        <div class="category-grid">
            <div class="category-item" onclick="filterMessages('all')">
                <span class="category-icon">📧</span>
                <div class="category-name">全部消息</div>
                <span class="category-badge">8</span>
            </div>
            <div class="category-item" onclick="filterMessages('system')">
                <span class="category-icon">🔔</span>
                <div class="category-name">系统通知</div>
                <span class="category-badge">3</span>
            </div>
            <div class="category-item" onclick="filterMessages('activity')">
                <span class="category-icon">📅</span>
                <div class="category-name">活动消息</div>
                <span class="category-badge">2</span>
            </div>
            <div class="category-item" onclick="filterMessages('service')">
                <span class="category-icon">🎁</span>
                <div class="category-name">服务消息</div>
                <span class="category-badge">3</span>
            </div>
        </div>
    </div>
    
    <!-- 筛选标签 -->
    <div class="filter-bar">
        <div class="filter-scroll">
            <span class="filter-tag active">全部</span>
            <span class="filter-tag">未读</span>
            <span class="filter-tag">重要</span>
            <span class="filter-tag">紧急</span>
            <span class="filter-tag">今天</span>
            <span class="filter-tag">本周</span>
            <span class="filter-tag">已收藏</span>
        </div>
    </div>
    
    <!-- 消息列表 -->
    <div class="message-list" id="messageList">
        <div class="message-item unread" onclick="openMessage(1)">
            <div class="message-header">
                <div class="message-avatar">🔔</div>
                <div class="message-info">
                    <div class="message-sender">系统通知</div>
                    <span class="message-type">系统消息</span>
                </div>
                <div class="message-time">5分钟前</div>
            </div>
            <div class="message-content">
                <div class="message-title">您有新的积分奖励</div>
                <div class="message-preview">恭喜您！参与"社区环保清洁行动"获得50积分奖励，当前总积分：1,300分。继续参与更多志愿活动，赚取更多积分吧！</div>
            </div>
            <div class="message-actions">
                <div class="message-tags">
                    <span class="message-tag">积分</span>
                </div>
                <div class="message-operations">
                    <span class="message-btn" onclick="event.stopPropagation(); starMessage(1)">⭐</span>
                    <span class="message-btn" onclick="event.stopPropagation(); deleteMessage(1)">🗑️</span>
                </div>
            </div>
        </div>
        
        <div class="message-item unread" onclick="openMessage(2)">
            <div class="message-header">
                <div class="message-avatar">📅</div>
                <div class="message-info">
                    <div class="message-sender">活动中心</div>
                    <span class="message-type">活动提醒</span>
                </div>
                <div class="message-time">1小时前</div>
            </div>
            <div class="message-content">
                <div class="message-title">活动即将开始提醒</div>
                <div class="message-preview">您报名的"敬老院慰问活动"将于明天上午9:00开始，请提前10分钟到达集合地点。活动地址：阳光敬老院...</div>
            </div>
            <div class="message-actions">
                <div class="message-tags">
                    <span class="message-tag important">重要</span>
                </div>
                <div class="message-operations">
                    <span class="message-btn" onclick="event.stopPropagation(); starMessage(2)">⭐</span>
                    <span class="message-btn" onclick="event.stopPropagation(); deleteMessage(2)">🗑️</span>
                </div>
            </div>
        </div>
        
        <div class="message-item unread" onclick="openMessage(3)">
            <div class="message-header">
                <div class="message-avatar">🎁</div>
                <div class="message-info">
                    <div class="message-sender">服务中心</div>
                    <span class="message-type">服务更新</span>
                </div>
                <div class="message-time">3小时前</div>
            </div>
            <div class="message-content">
                <div class="message-title">您的服务申请已受理</div>
                <div class="message-preview">您申请的"家电维修服务"已成功派单，志愿者李师傅将于今天下午2点为您提供服务。联系电话：138****5678</div>
            </div>
            <div class="message-actions">
                <div class="message-tags">
                    <span class="message-tag urgent">紧急</span>
                </div>
                <div class="message-operations">
                    <span class="message-btn" onclick="event.stopPropagation(); starMessage(3)">⭐</span>
                    <span class="message-btn" onclick="event.stopPropagation(); deleteMessage(3)">🗑️</span>
                </div>
            </div>
        </div>
        
        <div class="message-item" onclick="openMessage(4)">
            <div class="message-header">
                <div class="message-avatar">📢</div>
                <div class="message-info">
                    <div class="message-sender">社区公告</div>
                    <span class="message-type">公告通知</span>
                </div>
                <div class="message-time">昨天 16:30</div>
            </div>
            <div class="message-content">
                <div class="message-title">新时代文明实践中心升级公告</div>
                <div class="message-preview">亲爱的志愿者朋友们，为了提供更好的服务体验，我们的文明实践中心将于本周末进行系统升级维护...</div>
            </div>
            <div class="message-actions">
                <div class="message-tags">
                    <span class="message-tag">公告</span>
                </div>
                <div class="message-operations">
                    <span class="message-btn" onclick="event.stopPropagation(); starMessage(4)">⭐</span>
                    <span class="message-btn" onclick="event.stopPropagation(); deleteMessage(4)">🗑️</span>
                </div>
            </div>
        </div>
        
        <div class="message-item" onclick="openMessage(5)">
            <div class="message-header">
                <div class="message-avatar">🏆</div>
                <div class="message-info">
                    <div class="message-sender">成就系统</div>
                    <span class="message-type">成就解锁</span>
                </div>
                <div class="message-time">昨天 10:15</div>
            </div>
            <div class="message-content">
                <div class="message-title">恭喜解锁新成就</div>
                <div class="message-preview">恭喜您解锁"环保卫士"成就！您已累计参与环保活动5次，为建设美丽社区贡献了自己的力量。继续加油！</div>
            </div>
            <div class="message-actions">
                <div class="message-tags">
                    <span class="message-tag">成就</span>
                </div>
                <div class="message-operations">
                    <span class="message-btn" onclick="event.stopPropagation(); starMessage(5)">⭐</span>
                    <span class="message-btn" onclick="event.stopPropagation(); deleteMessage(5)">🗑️</span>
                </div>
            </div>
        </div>
        
        <div class="message-item" onclick="openMessage(6)">
            <div class="message-header">
                <div class="message-avatar">💰</div>
                <div class="message-info">
                    <div class="message-sender">积分商城</div>
                    <span class="message-type">商城提醒</span>
                </div>
                <div class="message-time">2天前</div>
            </div>
            <div class="message-content">
                <div class="message-title">您兑换的电影票已到账</div>
                <div class="message-preview">您使用500积分兑换的万达电影票已成功到账，请到"我的"页面查看电子券详情。有效期至2024年7月15日。</div>
            </div>
            <div class="message-actions">
                <div class="message-tags">
                    <span class="message-tag">兑换</span>
                </div>
                <div class="message-operations">
                    <span class="message-btn" onclick="event.stopPropagation(); starMessage(6)">⭐</span>
                    <span class="message-btn" onclick="event.stopPropagation(); deleteMessage(6)">🗑️</span>
                </div>
            </div>
        </div>
    </div>
    
    <!-- 底部导航 -->
    <div class="bottom-nav">
        <div class="nav-item" onclick="location.href='index.html'">
            <div class="nav-item-icon">🏠</div>
            <div class="nav-label">首页</div>
        </div>
        <div class="nav-item" onclick="location.href='venues.html'">
            <div class="nav-item-icon">📍</div>
            <div class="nav-label">阵地</div>
        </div>
        <div class="nav-item" onclick="location.href='activities.html'">
            <div class="nav-item-icon">📅</div>
            <div class="nav-label">活动</div>
        </div>
        <div class="nav-item" onclick="location.href='services.html'">
            <div class="nav-item-icon">🎁</div>
            <div class="nav-label">服务</div>
        </div>
        <div class="nav-item active">
            <div class="nav-item-icon">💬</div>
            <div class="nav-label">消息</div>
        </div>
    </div>
    
    <script>
        // 返回上一页
        function goBack() {
            history.back();
        }
        
        // 筛选消息
        function filterMessages(type) {
            console.log('筛选消息类型:', type);
            // 这里可以根据类型筛选消息列表
            alert(`筛选${type}类型消息\n功能开发中...`);
        }
        
        // 筛选标签点击
        document.querySelectorAll('.filter-tag').forEach(tag => {
            tag.addEventListener('click', function() {
                document.querySelectorAll('.filter-tag').forEach(t => t.classList.remove('active'));
                this.classList.add('active');
                
                const filterType = this.textContent;
                console.log('筛选:', filterType);
                
                // 这里可以根据筛选条件过滤消息
                if (filterType === '未读') {
                    // 只显示未读消息
                    document.querySelectorAll('.message-item').forEach(item => {
                        if (item.classList.contains('unread')) {
                            item.style.display = 'block';
                        } else {
                            item.style.display = 'none';
                        }
                    });
                } else if (filterType === '全部') {
                    // 显示所有消息
                    document.querySelectorAll('.message-item').forEach(item => {
                        item.style.display = 'block';
                    });
                } else if (filterType === '重要') {
                    // 只显示重要消息
                    document.querySelectorAll('.message-item').forEach(item => {
                        const hasImportant = item.querySelector('.message-tag.important');
                        if (hasImportant) {
                            item.style.display = 'block';
                        } else {
                            item.style.display = 'none';
                        }
                    });
                } else if (filterType === '紧急') {
                    // 只显示紧急消息
                    document.querySelectorAll('.message-item').forEach(item => {
                        const hasUrgent = item.querySelector('.message-tag.urgent');
                        if (hasUrgent) {
                            item.style.display = 'block';
                        } else {
                            item.style.display = 'none';
                        }
                    });
                } else {
                    alert(`${filterType}筛选功能开发中...`);
                }
            });
        });
        
        // 打开消息详情
        function openMessage(id) {
            // 标记为已读
            const messageItem = event.currentTarget;
            messageItem.classList.remove('unread');
            
            // 更新未读数量
            updateUnreadCount();
            
            alert(`打开消息详情 ID: ${id}\n\n功能开发中...\n将显示完整的消息内容、附件、相关操作等`);
        }
        
        // 收藏消息
        function starMessage(id) {
            const starBtn = event.currentTarget;
            if (starBtn.textContent === '⭐') {
                starBtn.textContent = '⭐';
                starBtn.style.color = '#faad14';
                alert('消息已收藏');
            } else {
                starBtn.textContent = '⭐';
                starBtn.style.color = '';
                alert('取消收藏');
            }
        }
        
        // 删除消息
        function deleteMessage(id) {
            if (confirm('确定要删除这条消息吗？')) {
                const messageItem = event.currentTarget.closest('.message-item');
                messageItem.style.transition = 'all 0.3s';
                messageItem.style.transform = 'translateX(-100%)';
                messageItem.style.opacity = '0';
                
                setTimeout(() => {
                    messageItem.remove();
                    updateUnreadCount();
                }, 300);
            }
        }
        
        // 标记全部已读
        function markAllRead() {
            if (confirm('确定要标记所有消息为已读吗？')) {
                document.querySelectorAll('.message-item.unread').forEach(item => {
                    item.classList.remove('unread');
                });
                updateUnreadCount();
                alert('所有消息已标记为已读');
            }
        }
        
        // 更新未读数量
        function updateUnreadCount() {
            const unreadCount = document.querySelectorAll('.message-item.unread').length;
            const badges = document.querySelectorAll('.category-badge');
            
            // 更新全部消息的数量
            if (badges[0]) {
                badges[0].textContent = unreadCount;
                if (unreadCount === 0) {
                    badges[0].style.display = 'none';
                } else {
                    badges[0].style.display = 'flex';
                }
            }
        }
        
        // 显示设置
        function showSettings() {
            alert('消息设置：\n\n• 推送通知设置\n• 消息提醒音\n• 免打扰时间\n• 消息分类管理\n• 自动删除设置\n\n功能开发中...');
        }
        
        // 搜索功能
        document.querySelector('.search-btn').addEventListener('click', function() {
            const keyword = document.querySelector('.search-input').value;
            if (keyword.trim()) {
                alert(`搜索关键词: ${keyword}\n\n功能开发中...\n将在消息标题和内容中搜索相关信息`);
            }
        });
        
        // 回车搜索
        document.querySelector('.search-input').addEventListener('keypress', function(e) {
            if (e.key === 'Enter') {
                document.querySelector('.search-btn').click();
            }
        });
        
        // 阻止消息操作按钮的事件冒泡
        document.querySelectorAll('.message-btn').forEach(btn => {
            btn.addEventListener('click', function(e) {
                e.stopPropagation();
            });
        });
        
        // 页面加载完成后更新未读数量
        document.addEventListener('DOMContentLoaded', function() {
            updateUnreadCount();
        });
    </script>
</body>
</html>